<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>商品分类列表</title>
		<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.min.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.theme.min.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="css/jqgrid/ui.jqgrid.css" />
	</head>

	<body>
		<table id="gridTable"></table>
		<div id="gridPager"></div>
	</body>
	<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
	<script src="js/jquery-ui.min.js" type="text/javascript"></script>
	<script src="js/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>
	<script src="js/jqgrid/i18n/grid.locale-cn.js" type="text/javascript"></script>
	<script type="application/javascript">
		$(function() {
			$("#gridTable").jqGrid({
				url: 'http://127.0.0.1:8080/api/v1/shopType',
				datatype: "json",
				colNames: ['id', '分类代码', '分类名称', '包含商品数', '每页显示商品数'],
				height: "auto",
				colModel: [{
					name: 'id',
					index: 'id',
					width: 200
				}, {
					name: 'oprtCatNo',
					index: 'oprtCatNo',
					width: 100
				}, {
					name: 'typeName',
					index: 'typeName',
					width: 300,
				}, {
					name: 'total',
					index: 'total',
					width: 80,
				}, {
					name: 'pageSize',
					index: 'pageSize',
					width: 150,
				}],
				rowNum: 10,
				rowList: [10, 20, 30],
				pager: '#gridPager',
				sortname: 'oprtCatNo',
				mtype: "get",
				viewrecords: true,
				sortorder: "asc",
				caption: "商品分类列表",
				jsonReader : {
					root : "objList",
					page : "pageNum",
					total : "maxPage",
					records : "count",
					repeatitems : false
				},
			}); 
			jQuery("#gridTable").jqGrid('navGrid', '#gridPager', {
				edit: false,
				add: false,
				del: false
			});
		});
	</script>

</html>